<template>
    <div class="el-single-select">
        <el-dialog
            :before-close="handleClose"
            :close-on-click-modal="false"
            :title="dialogData.title"
            :visible.sync="dialogVisible"
            v-if="dialogVisible"
            width="1000px"
        >
            <div class="el-dialog-box">
                <div class="dialog-top">
                    <slot name="dialogTop">
                        <div class="dialog-input" v-for="(item,index) in dialogData.searchData" :key="index">
                            <span class="label">{{ item.label + "：" }}</span>
                            <el-input
                                v-model="searchForm[item.models]"
                                :placeholder="`请输入${item.label}模糊查询`"
                                style="width: 260px"
                            ></el-input>
                        </div>
                        <div style="width: 100%; display: flex; justify-content: center">
                            <el-button
                                size="mini"
                                type="primary-font-mini"
                                @click="search"
                            >搜索
                            </el-button>
                            <el-button size="mini" type="default-mini" @click="reset"
                            >重置
                            </el-button>
                        </div>
                    </slot>
                </div>
                <div class="dialog-bottom">
                    <el-table
                        :data="dialogData.tableData"
                        ref="multipleTable"
                        max-height="314"
                        tooltip-effect="dark"
                        v-if="dialogVisible"
                    >
                        <el-table-column label="序号" type="index" width="55"/>
                        
                        <el-table-column
                            v-for="(i, m) in dialogData.tableTheadOptions"
                            :key="m"
                            :label="i.label"
                            :prop="i.prop"
                            :min-width="i.width"
                        >
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="{ row }">
                                <el-button
                                    class="row-btn"
                                    plain
                                    type="single-number"
                                    @click="getDialogTableData(row)"
                                >选择
                                </el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="dialog-footer" slot="footer">
                <div id="ccui-paging">
                    <el-pagination
                        :page-sizes="[10, 20, 50, 100, 200, 500]"
                        :total="dialogData.pages.total"
                        :page-size="dialogData.pages.pageSize"
                        :current-page="dialogData.pages.pageNo"
                        @current-change="val => {handlePageChange(val,'current')}"
                        @size-change="val => {handlePageChange(val,'size')}"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        next-text="下一页 >"
                        popper-class="ccui-paging-page-size-popper"
                        prev-text="< 上一页"
                    ></el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "contractDialog",
    props: {
        dialogData: {
            type: Object,
            default: () => {
                return {
                    title: "请传入相应的数据",
                    searchData: [],
                    tableTheadOptions: []
                }
            }
        },
        parentForm: {
            type: {},
            default: () => {}
        }
    },
    data() {
        return {
            dialogVisible: false,
            searchForm: {},
        }
    },
    methods: {
        getDialogTableData(row) {
            this.$emit("getDialogTableData", row);
            this.dialogVisible = false;
        },
        handlePageChange(val, type) {
            this.$emit("handlePageChange", val, type);
        },
        handleClose() {
            this.dialogVisible = false;
        },
        search() {
            for (let prop in this.searchForm) {
                this.$set(this.searchForm, prop, this.searchForm[prop].replace(/(^\s*)|(\s*)$/g, ""));
            }
            this.$emit("search", this.searchForm);
        },
        reset() {
            this.searchForm = {};
            this.$emit("reset");
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-single-select .el-dialog__wrapper .el-dialog .el-dialog__body {
    .el-dialog-box .dialog-top {
        justify-content: space-between;
    }
}

.row-btn {
    width: auto !important;
    padding: 0 20px !important;
    margin-left: 0 !important;
}

/deep/ .label {
    display: inline-block;
    width: 130px !important;
    text-align: right;
}

/deep/ .el-dialog__footer {
    border-top: none;
}
</style>